/**
 * 学习记录
 * 
 * */

import React, { useMemo, useState,useCallback } from 'react';
import Header from '@/component/layout/Header/Header';
import classnames from 'classnames';
import List from './List';
import UnList from './unList';
import CommonList from '@/component/common/CommonList/CommonList';
import { getLearnedList, getUnlearnedList } from '@/network/protocol';

import './style.less';

// 0 产品知识
// 1 医学知识
const pageSize = 20;
let tab = 0;

const StudyRecord = (props) => {
  const [tabKey, setTabKey] = useState(tab);
  const [param, setParam] = useState({pageIndex:1, pageSize})
 
  const imgList = useMemo(() => {
    return [
      { name: '未完成', url: [require('../../assests/img/protab1-0.png'), require('../../assests/img/protab1-1.png')] },
      { name: '已完成', url: [require('../../assests/img/protab2-0.png'), require('../../assests/img/protab2-1.png')] },
    ]
  }, [])

  const method = useMemo(() => {
    return [getUnlearnedList, getLearnedList][tabKey]
  }, [tabKey])

  const update = useCallback(() => {
    setParam({...param, pageIndex:param.pageIndex+1})
  }, [param])

  const setTabKeyF = useCallback((e) => {
    if(e === tabKey) return;
    tab = e;
    setTabKey(e)
    setParam({...param, pageIndex:1})
  }, [param, tabKey])

  return (
    <>
      <Header center={<span>学习记录</span>} />
      <div className="global-content StudyRecord-box">
        <div className="StudyRecord-tab">
          {
            imgList.map((item, index) => {
              return (
                <div
                  onClick={() => setTabKeyF(index)}
                  className={classnames({ 'StudyRecord-tab-item': true, 'cur': tabKey === index })} key={item.name}>
                  <img src={item.url[tabKey === index ? 1 : 0]} alt="" />
                  <p >{item.name}</p>
                </div>
              )
            })
          }
        </div>
        <div className="StudyRecord-list">
          <CommonList update={update} viewCmp={tabKey===0?UnList:List} method={method} param={param} />
        </div>
      </div>
    </>
  )
}


export default StudyRecord 